<template>
  <div class="trend_week">
    <div id="trendWeekChar"
         style="width:100%;height:100%"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
import ECharts from 'vue-echarts'
export default {
  components: {
    ECharts
  },
  props: {
    newDate: {
      type: Date,
      default: ''
    }
  },
  data() {
    return {
      char: null
    }
  },
  watch: {
    newDate() {
      this.chart.resize()
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    getPolicecommandStatistics() {
      this.$get('console/api/v1/cockpit/alarm-trend').then(r => {
        const data = r.data.data[0]
        this.init(data.time, data.alarm, data.fault)
      })
    },
    init(xData, series1Data, series2Data) {
      xData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      series1Data = [8, 10, 5, 15, 20, 6, 8]
      series2Data = [11, 20, 16, 9, 11, 8, 16]
      const series1 = this.initSerieOption('报警', '#A9F387', '#48D8BF', series1Data)
      const series2 = this.initSerieOption('异常', '#32B7E9', '#005aff', series2Data)
      this.chart = echarts.init(document.getElementById('trendWeekChar'))
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          bottom: '10%'
        },
        legend: {
          data: ['报警', '异常'],
          textStyle: {
            color: '#fff'
          }
        },
        xAxis: [{
          type: 'category',
          data: xData,
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        }],
        yAxis: [{
          type: 'value',
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#DDD'
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          nameTextStyle: {
            color: '#999'
          },
          splitArea: {
            show: false
          }
        }],
        series: [series1, series2]
      }
      this.chart.setOption(option, true)
    },
    initSerieOption(name, color1, color2, data) {
      return {
        name: name,
        type: 'line',
        data: data,
        lineStyle: {
          normal: {
            width: 3,
            color: {
              type: 'linear',

              colorStops: [{
                offset: 0,
                color: color1// 0% 处的颜色
              }, {
                offset: 1,
                color: color2// 100% 处的颜色
              }],
              globalCoord: false
            },
            shadowColor: 'rgba(72,216,191, 0.3)',
            shadowBlur: 10,
            shadowOffsetY: 20
          }
        },
        itemStyle: {
          normal: {
            color: '#fff',
            borderWidth: 10,
            borderColor: color1
          }
        },
        smooth: true
      }
    }
  }

}
</script>
<style lang="scss" scoped>
.trend_week {
  width: 100%;
  height: 100%;
}
</style>
